<template>
    <div v-show="showDialog" class="bg-box">
        <div v-if="isPdf" class="pdf-box">
            <vue-office-pdf crossorigin="anonymous" :src="url" />
        </div>
        <div v-else class="img-box">
            <el-image ref="imgRef" :close-on-press-escape="false" :preview-src-list="[url]" crossorigin="anonymous" class="img" :src="url" fit="cover" />
        </div>
        <div class="close" @click="handleClose">&times;</div>
    </div>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import VueOfficePdf from '@vue-office/pdf'
const props = defineProps({
    url: {
        type: String,
        default: ''
    },
    show: {
        type: Boolean,
        default: false
    }
})

const emits = defineEmits(['update:show', 'update:url'])

const isPdf = computed(() => {
    return props.url.endsWith('pdf')
})

const imgRef = ref(null)

const showDialog = ref(false)

const handleClose = () => {
    showDialog.value = false
    emits('update:show', showDialog.value)
}

watch(() => props.show, (newval) => {
    if (newval) {
        showDialog.value = newval
        setTimeout(() => {
            document.querySelector('.el-image__preview').click()
        }, 100)
    }
    if (!newval) {
        emits('update:url', '')
    }
}, {
    immediate: true
})

</script>
<style lang="scss" scoped>
.bg-box {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 10000;
}

.img-box,
.pdf-box {
    position: absolute;
    // width: 50vmax;
    height: 80vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
// .img {
//     width: auto;
//     height: 70vh;
//     margin: 0 auto;
// }
.close {
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}
::v-deep() .el-image__preview {
    opacity: 0;
}
::v-deep() .el-image-viewer__mask {
    opacity: 0;
}
::v-deep() .el-image-viewer__close {
    opacity: 0;
}
</style>